<template>
	<div class="warp-box">
		<el-row class="search-box" :gutter="10">
      <el-col :span="20">
          <el-input clearable style="width:340px" v-model="parames.customerName" size="small" placeholder="搜索公司名称"></el-input>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button size="small" type="text" icon="el-icon-s-open" @click="handleSearch">高级搜索</el-button>
      </el-col>
    </el-row>
    <el-row class="main-box channel1234" style="margin:10px -5px;">
        <el-col :span="24">
            <el-button size="small" type="primary" icon="el-icon-plus" @click="handleAdd">新建商机</el-button>
            <el-button v-if="daochuBtn" size="small" icon="el-icon-download" @click="handleExport">导出</el-button>
            <el-button v-if="zhuanchuBtn" size="small" icon="el-icon-connection" @click="handleTrans">分配资源</el-button>
            <el-button v-if="zuofeiBtn" size="small" icon="el-icon-delete" @click="handleFly">批量作废</el-button>
        </el-col>
        <el-col :span="24">
          <el-table
            :data="tableData"
            border
            v-loading="loading"
            @row-click="handleRow"
            class="table-bar"
            :row-class-name="tableRowClassName"
            @selection-change="handleSelectionChange"
            style="margin-top:14px;">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column
              show-overflow-tooltip
              v-for="(item,index) in columns" 
              :key="index"
              :min-width="item.width"
              :fixed="item.fixed"
              :prop="item.key"
              :label="item.title"
              >
              <template slot-scope="scope">
                <div v-if="item.key == 'opportunityStatus'"> <!-- 状态 -->
                  <span v-if="scope.row.opportunityStatus">
                    {{scope.row.opportunityStatus.desc}}
                    <span v-if="scope.row.invalidReason">(原因：{{scope.row.invalidReason}})</span>
                    </span>
                  <!-- <div style="color:#fe7251;" v-if="scope.row.status == 0">审核中</div> -->
                  <!-- <div style="color:#4877e9;" v-if="scope.row.status == 1">已放款</div> -->
                </div>
                <div v-if="item.key == 'contactType'"> <!--联系方式-->
                  <span v-if="scope.row.contactType">{{scope.row.contactType.desc}}-{{scope.row.mobile}}</span>
                </div>
                <div v-if="item.key == 'director'"> <!--联系人-->
                  <span>{{scope.row.director}}(工号：{{scope.row.directorWorkNumber}}）</span>
                </div>
                <div v-if="item.key == 'customerName'"> <!--客户名称-->
                  <span style="color:#409EFF;cursor:pointer">{{scope.row.customerName}}</span>
                </div>
                <div v-if="item.key == 'opportunityOverview'"> <!--商机概述-->
                  <span v-if="scope.row.opportunityOverview">
                    {{scope.row.opportunityOverview}}</span>
                  <span v-if="scope.row.urgencyLabel">
                    <el-tag size="mini" type="warning" v-if="scope.row.urgencyLabel.name == 'IMPORTANT'">{{scope.row.urgencyLabel.desc}}</el-tag>
                    <el-tag size="mini" type="danger" v-if="scope.row.urgencyLabel.name == 'URGENT'">{{scope.row.urgencyLabel.desc}}</el-tag>
                    <el-tag size="mini" type="info" v-if="scope.row.urgencyLabel.name == 'ORDINARY'">{{scope.row.urgencyLabel.desc}}</el-tag>
                  </span>
                  <span v-if="scope.row.importanceLabel">
                    <el-tag size="mini" type="info">{{scope.row.importanceLabel.desc}}</el-tag>
                  </span>
                </div>
                <div v-if="item.key !== 'opportunityStatus' && item.key !== 'contactType' && item.key !== 'opportunityOverview' && item.key !== 'customerName' && item.key !== 'createDate' && item.key !== 'director'" >
                  <p v-if="item.key == 'modifyDate'" class="ellisps">{{scope.row[item.key] | formatDate}}</p>
                  <p v-else class="ellisps">{{scope.row[item.key]}}</p>
                </div>
                <div v-if="item.key == 'createDate'"> <!--创建时间-->
                  <span>{{scope.row.createDate | formatDate}}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              width="80"
              align="center"
              label=""
              fixed="right">
              <template slot-scope="scope">
                <div style="text-align: center">
                  <el-button size="mini" @click="handleRow(scope.row)" type="text" icon="el-icon-search"></el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24">
          <pages :parames="parames" @render="checkPage"></pages>
        </el-col>
      </el-row>
      <createdDialog :dialogData="dialogData" @checkRender="getList"></createdDialog>
      <searchDialog :searchData="searchData" @checkSearch="checkSearch" @resetSearch="resetSearch"></searchDialog>
      <detailDialog :detailData="detailData" @checkRender="getData"></detailDialog>
      <customerDetailDialog :detailData="customerDetailData"></customerDetailDialog>
        <transCreated :createdData="createdData" @checkRender="checkRender"></transCreated>
      <invalid :invalidData="invalidData" @checkRender="getList"></invalid>
    
    </div>
</template>

<script>
import createdDialog from './createdDialog.vue'  //新建商机
import searchDialog from './opportSearchDialog.vue' //高级搜索弹窗
import detailDialog from './opportDetailDialog.vue' //商机详情弹窗
import customerDetailDialog from "../customerManage/opportDetailDialog.vue"; //客户详情弹窗
import transCreated from './transCreated' //变更负责人
import invalid from './invalidDialog' //作废原因

export default {
  props: ['type'],
  data () {
    return {
      loading: false,
      parames: {
        tabKey: this.type,
        page: 1, //页码index
        limit: 10, //页码最大
        customerName: '', //名称
        totalCount: 0,
        search: []
      },
      dialogData: { //新建弹窗
        show: false
      },
      createdData: {
        show: false
      },
      invalidData: { //作废
        show: false
      },
      searchData: { //搜索弹窗
        show: false
      },
      customerDetailData: { //客户弹窗
        id: '',
        show: false
      },
      detailData: { //商机详情弹窗
        id: '',
        show: false
      },
      total: 100,
      pagelimit: 10,
      pageindex: 1,
      columns: [
        { title: '公司名称', width: '160', key: 'customerName', fixed: 'left', },
        { title: '联系人', width: '200', key: 'contacts' },
        { title: '联系方式', width: '200', key: 'contactType' },
        { title: '负责人', width: '200', key: 'director' },
        { title: '状态', width: '200', key: 'opportunityStatus' },
        { title: '商机来源', width: '200', key: 'opportunitySource' },
        { title: '创建时间', width: '200', key: 'createDate' },
        { title: '商机概述', width: '200', key: 'opportunityOverview' },
      ],
      companyId: '',
      tableData: [],
      multipleSelection: [],
      daochuBtn: false,
      zhuanchuBtn: false,
      zuofeiBtn: false,
    }
  },
  components: {
    createdDialog,
    searchDialog,
    detailDialog,
    customerDetailDialog,
    transCreated,
    invalid
  },
  methods: {
    handleExport () {
      var search = ''
      if (this.parames.search.length>0) {
        search = encodeURIComponent(JSON.stringify(this.parames.search).toString())
      }
      window.location.href = this.$api.postOpportunityExport+'?userId=' + this.$utils.getLocalStorage('user').id+'&tabKey=' + this.type + '&search=' + search
    },
    checkRender () {
        this.parames.page = 1
        this.getList()
    },
    handleSelectionChange(val) {
        this.multipleSelection = val;
    },
    handleTrans () { //批量转出
        if (this.multipleSelection.length == 0) {
            this.$alert('请至少选择一个商机','提示')
            return false
        }
        let ids = []
        this.multipleSelection.forEach(el=>{
            ids.push(el.id)
        })
        this.createdData.type = 'Allshangji'
        this.createdData.ids = ids
        this.createdData.directorId = this.parames.directorId
        this.createdData.show = true
    },
    handleFly() { //批量作废
        if (this.multipleSelection.length == 0) {
            this.$alert('请至少选择一个商机','提示')
            return false
        }
        let ids = []
        this.multipleSelection.forEach(el=>{
            ids.push(el.id)
        })
        this.invalidData.type = 'piliang'
        this.invalidData.id = ids
        this.invalidData.show = true
    },
    search() {
      //查询
      this.parames.page = 1;
      let searchDate = this.parames.search
      let n = 0
      this.parames.search.forEach(el=>{
        if (el.key == 'customerName') {
          n = 1
        }
      })
      if (this.parames.customerName && n == 0) {
        this.parames.search.push({
          key: 'customerName',
          value: this.parames.customerName,
          type: 'string'
        })
      } else if (this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            el.value = this.parames.customerName
          }
        })
      } else if (!this.parames.customerName && n == 1) {
        this.parames.search.forEach((el,index)=>{
          if (el.key == 'customerName') {
            this.parames.search.splice(index,1)
          }
        })
      }
      this.getList()
    },
    resetSearch () {
      this.parames.customerName = ''
    },
    checkSearch (value) {
      this.parames.search = value
      value.forEach(el=>{
        if(el.key == 'customerName') {
          this.parames.customerName = el.value
        }
      })
      this.parames.page = 1
      this.getList()
    },
    checkPage () {
      this.getList()
    },
    handleAdd () { //新建商机
      this.dialogData.type = 'new'
      this.dialogData.title = '新建商机'
      this.dialogData.show = true
    },
    handleOpenCustomer (id) { //点击客户打开客户详情
      this.customerDetailData.id = id;
      this.customerDetailData.show = true;
    },
    getData () {
      this.$post(this.$api.postOpportunityList,this.parames).then(response => {
        if (response.data.succeed) {
            this.parames.totalCount = response.data.totalCount
            this.tableData = response.data.data
        }
        setTimeout(() => {
          this.loading = false
        }, 200);
      })
    },
    getList () { //获取页面数据
	    this.loading = true
      this.getData()
    },
    handleRow (row) { //点击某一行数据打开详情
      this.detailData.id = row.id;
      this.detailData.show = true
    },
    handleSearch () { //打开高级搜索弹窗
      this.searchData.customerName = this.parames.customerName
      this.searchData.show = true
    },
    tableRowClassName({row, rowIndex}) { //斑马表格
      if ((rowIndex % 2) === 1) {
        return 'warning-row'
      } else {
        return 'success-row'
      }
      return ''
    }

  },
  mounted () {
    let buttonLimit = this.$utils.getLocalStorage('buttonlist')  //按钮缓存
    if (buttonLimit.indexOf('k053') !== -1) {
      this.daochuBtn = true
    }
    if (buttonLimit.indexOf('k054') !== -1) {
      this.zhuanchuBtn = true
    }
    if (buttonLimit.indexOf('k055') !== -1) {
      this.zuofeiBtn = true
    }
    
    this.getList()
  }
}
</script>

<style>
.el-table .warning-row {
  background: #f9f9f9;
}
.el-table .success-row {
  background: #fff;
}
</style>